<template>
	
	
	<el-container class="home-container">

	
		<!--头部区域-->
	  <el-header>
		
	  	<div>
	  		
	  		<span>电商后台管理系统</span>
	  	</div>
		<el-button type="info" @click="loginOut">退出</el-button>
	  </el-header>
	  <!-- 页面主体区域 -->
	  <el-container>
	  		
	  		<el-aside :width="isCollapse ? '64px' : '200px'" class="toggle">
				<div class="toggle-button" @click="toggleCollapse">|||</div>
			    <!-- 侧边栏菜单区 -->
			    <el-menu
			      background-color="#333744"
			      text-color="#fff"

			      active-text-color="#409bff" unique-opened :collapse="isCollapse" :collapse-transition="false" router :default-active="activePath">
			      <!--一级菜单-->
			      <!--由于index只接受字符串所以 而item.id为数值所以直接给index会报错，在item.id后面加一个空字符串就能转化为字符类型了-->
			      <el-submenu :index="item.id + '' " v-for="item in menuList" :key="item.id">
			      	<!--一级菜单的模版区域-->
			        <template slot="title">
			          <i :class="iconsObj[item.id]"></i>
			          <span>{{item.authName}}</span>
			        </template>
					 <!--二级菜单-->
			        <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="getActivePath( '/'+subItem.path )">
			        	<template slot="title">
			         	 	<i class="el-icon-menu"></i>
			          		<span>{{subItem.authName}}</span>
			        	</template>
			    	</el-menu-item>

			      </el-submenu>
			    </el-menu>
	        </el-aside>
	  	
	   
	    </el-aside>
	    <el-main>
			<router-view></router-view>
	    </el-main>
	  </el-container>
	</el-container>

</template>

<script>

	export default {
		data(){
			return {
				//左侧菜单数据
				menuList:[],
				iconsObj:{
						'125':'iconfont iconyonghu',
						'103':'iconfont iconquanxian',
						'101':'iconfont iconshangpin-tianchong',
						'102':'iconfont icon5',
						'145':'iconfont iconquanxian'
				},
				isCollapse:false,
				activePath:''
			}
		},
		methods:{
			loginOut(){
				window.sessionStorage.clear()
				this.$router.push('/login')
			},
			//获取所有菜单
			async getMenuList(){
				const {data: res} = await this.$http.get('menus')
				console.log(res)
				if(res.meta.status !== 200) return this.$message.error(res.mate.msg)
				this.menuList = res.data
				
			},
			//菜单的折叠与展开
			toggleCollapse(){
				this.isCollapse = !this.isCollapse
				
			},
			getActivePath(Path){
				window.sessionStorage.setItem('activePath',Path)
				this.activePath = Path
			}
		},
		created(){
			this.getMenuList()
			this.activePath = window.sessionStorage.getItem('activePath')
		}
	}
</script>

<style lang="less" scoped>
	.home-container{
		height:100%;
	}
	.el-header{
		background-color:#373d41;
		display:flex;
		justify-content:space-between;
		padding-left:0;
		align-items:center;
		color:#fff;
		font-size:20px;
		> div{
			display:flex;
			align-items:center;
			span{
				margin-left:15px;
			}
		}
	}
	.el-aside{
		background-color:#333744;
		.el-menu{
			border-right:none;
		}
	}
	.el-main{
		background-color:#eaedf1;
	}
	.iconfont{
		margin-right:10px;
	}
	.toggle-button{
		background-color:#4A5064;
		font-size:10px;
		line-height: 24px;
		color:#fff;
		text-align:center;
		letter-spacing:0.2em;
		cursor:pointer;
	}
	.toggle{
		transition:all 1s;
	}
</style>